<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            box-shadow: 0px 0px 12px #999;
            width: 600px;
            height: 400px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div class="box" id="a-chart"></div>
    <hr>
    <div class="box" id="b-chart"></div>
    <hr>
    <div class="box" id="c-chart"></div>
    <script type="module">
        import * as echarts from './echarts/echarts.esm.js'

        let echartA = echarts.init(document.querySelector("#a-chart"))
        echartA.setOption({
            title: {
                text: 'ECharts 入门示例',
                link: 'https://www.itany.com',
            },
            legend: {
                // data: ['库存'], // 使用数据集时，可以自动生成该功能
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            // dataset: {
            //     source: [
            //         [   'Product',     'Sales',    'inventory' ],
            //         [   'Milk Tee',    311,        21   ],
            //         [   'Cake',        135,        28   ],
            //         [   'Latte',       262,        36     ],
            //         [   'aaa',         262,        36     ],
            //         [   'ccc',         262,        36     ]

            //     ]
            // },
            xAxis: {
                // data:['Milk Tee','Cake','Latte',"aaa"]
                type: "category"
            },
            yAxis: {},
            series: [
                {
                    name: "销量", // 当name被定义，数据获取的顺序不变，但会改变展示名称
                    type: "bar"
                },
                {
                    name: "库存",
                    type: "bar"
                }
            ]
        })

        echartA.showLoading('default', {
            text: "数据加载中……"
        });
        setTimeout(() => {
            echartA.setOption({
                dataset: {
                    source: [
                        ['Product', 'Sales', 'inventory'],
                        ['Milk Tee', 311, 21],
                        ['Cake', 135, 28],
                        ['Latte', 262, 36],
                        ['aaa', 262, 36],
                        ['ccc', 262, 36]
                    ]
                }
            })
            echartA.hideLoading()
        }, 3000)

        let echartB = echarts.init(document.querySelector("#b-chart"))
        echartB.setOption({
            title: {
                text: 'ECharts 入门示例',
                link: 'https://www.itany.com',
            },
            legend: {},
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            dataset: {
                source: [
                    { product: 'Matcha Latte', Sales: 823, inventory: 95.8 },
                    { product: 'Milk Tea', Sales: 235, inventory: 81.4 },
                    { product: 'Cheese Cocoa', Sales: 1042, inventory: 91.2 },
                    { product: 'Walnut Brownie', Sales: 988, inventory: 76.9 }
                ]
            },
            xAxis: {
                type: "category"
            },
            yAxis: {},
            series: [
                {
                    name: "销量", // 当name被定义，数据获取的顺序不变，但会改变展示名称
                    type: "bar"
                },
                {
                    name: "库存",
                    type: "bar"
                }
            ]
        })

        let echartC = echarts.init(document.querySelector("#c-chart"))
        echartC.setOption({
            title: {
                text: 'ECharts 入门示例',
                link: 'https://www.itany.com',
            },
            legend: {},
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            dataset: {
                source: {
                    'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
                    'count': [823, 235, 1042, 988],
                    'score': [95.8, 81.4, 91.2, 76.9]
                }
            },
            xAxis: {
                type: "category"
            },
            yAxis: {},
            series: [
                {
                    name: "销量", // 当name被定义，数据获取的顺序不变，但会改变展示名称
                    type: "bar"
                },
                {
                    name: "库存",
                    type: "bar"
                }
            ]
        })

    </script>
</body>

</html>